<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-10 18:28:38
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2024-05-11 10:23:37
 * @FilePath: \ant-design-vue-jeecg-master\src\views\situationDisplay\modules\SXZY.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="windowInfo" >
      <div class='QZTWYZ'>
        强制退网超时阈值:
            <span v-if="!isEdit">
              <a-input v-model="threshold" disabled style='width:120px;margin: auto 5px' suffix='s' class='custom-input'></a-input>
              <a-icon  type="setting" theme="filled" @click="isEdit=true"  style='font-size:18px;color:#0278CD'/>
            </span>
            <span v-else>
              <a-input v-model="threshold" style='width:120px;margin: auto 5px' suffix='s' class='custom-input'></a-input>
              <a-icon  type="check-circle" theme="twoTone"  @click="setThreshold" style='font-size:18px;color:#0278CD'/>
            </span>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction, httpAction } from '@/api/manage.js'
export default {
  data() {

    return {
      isEdit:false,
      url: {
        setThreshold: '/systemConfig/nmcSystemConfig/fixedAddEntity',
        getThreshold: '/systemConfig/nmcSystemConfig/getByConfigKey',
      },
      threshold: '',
    }
  },
  created() {
    this.getByConfigKey();
  },
  methods: {
    getByConfigKey() {
      getAction(this.url.getThreshold, { configKey: 'commandVehicleForceExitNetworkTimeCount' }).then(res => {
        if (res.success) {
          console.log(res, '---------------')
          this.threshold = res.result
        } else {
          this.$message.error(res.message)
        }
      })

    },
    setThreshold(){
      httpAction(this.url.setThreshold,{configKey:'commandVehicleForceExitNetworkTimeCount',configValue:this.threshold},'post').then(res=>{
          if (res.success) {
          this.$message.success(res.message)
          this.isEdit=false
          this.getByConfigKey()
        } else {
          this.$message.error(res.message)
          this.isEdit=true
        }
      })

    },
    filter(val) {
      if (val == 0) {
        return '故障'
      } else if (val == 1) {
        return '正常'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.custom-input /deep/ .ant-input-suffix {
  color: #fff; /* 设置后缀字体颜色为红色 */
}
.errRed {
  color: red;
}
.tableContainer {
  width: 202px;
  display: flex;
  border: solid 0.1px rgb(87, 217, 249);
  flex-wrap: wrap;
  margin: 0 auto;
  .tableItem {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: solid 0.1px rgb(87, 217, 249);
  }
}
.keyBox {
  // background: rgb(252, 249, 249);
  // position: absolute;
  // left: 45%;
  // margin: auto;
  // top: 15px;
  line-height: 32px;
  color: #fff;
  height: auto;
  display: flex;
  border-radius: 15px;
  padding: 5px;
  div {
    padding: 0 2px;
  }

  .WPZ {
    line-height: 15px;
    margin-right: 10px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: red;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .JL {
    line-height: 15px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: rgb(108, 245, 108);
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .DX {
    line-height: 15px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: rgb(119, 118, 118);
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.windowInfo {
  min-width: 220px;

  height: 50px;
  h3 {
    color: rgb(87, 217, 249);
  }
  color: #fff;
  padding: 10px;
  // background: rgba(30, 36, 50, 0.6) !important;
  .windowInfo-head {
    display: flex;
  }
}
/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
<style lang="less">
.windowInfo .ant-tabs-nav .ant-tabs-tab {
  color: #fff !important;
}
</style>
